<template>
  <view class="flex">
    <a-card title="基础">
      <a-space wrap>
        <a-button type="primary" @click="fade('fade')"> fade动画 </a-button>
        <a-button type="primary" @click="fade('fadeUp')"> fadeUp </a-button>
        <a-button type="primary" @click="fade('bounce')"> bounce </a-button>
        <a-button type="primary" @click="fade('fadeInLeft')">
          fadeInLeft
        </a-button>
        <a-button type="primary" @click="fade('fadeInTopLeft')">
          fadeInTopLeft
        </a-button>
      </a-space>
    </a-card>
    <a-card title="animation动画">
      <a-space wrap>
        <a-button type="primary" @click="fades('zoomIn')">
          zoomIn动画
        </a-button>
        <a-button type="primary" @click="fades('zoomInDown')">
          zoomInDown
        </a-button>
        <a-button type="primary" @click="fades('slideInDown')">
          slideInDown
        </a-button>
        <a-button type="primary" @click="fades('fadeInLeft')">
          fadeInLeft
        </a-button>
        <a-button type="primary" @click="fade('fadeInTopLeft')">
          fadeInTopLeft
        </a-button>
      </a-space>
    </a-card>

    <a-transition unmount :show="visible" :name="name">
      <p class="ps">Hello here is some bouncy text!</p>
    </a-transition>
    <a-transition unmount animation :show="visibless" :name="names">
      <p class="ps">Animate.css</p>
    </a-transition>
    <a-button type="primary" @click="visibles = !visibles"> 离开 </a-button>
    <a-transition
      class="wd-overlay"
      :show="visibles"
      :duration="5000"
      name="slide-right-drawer"
    >
      <view class="boxs"> </view>
    </a-transition>
    <a-transition :show="true" appear name="lightSpeedInRight">
      <view class="box"> </view>
    </a-transition>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const name = ref("");

const visible = ref(false);

const names = ref("");

const visibless = ref(false);

const visibles = ref(true);

function fade(value) {
  name.value = value;
  visible.value = !visible.value;
}

function fades(value) {
  names.value = value;
  visibless.value = !visibless.value;
}
</script>

<style>
.flex {
  padding: 100px 20px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

.boxs {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 300px;
  height: 100%;
  background: red;
}

.ps {
  line-height: 36rpx;
  text-align: center;
}

.wd-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
</style>
